<template>
	<view>
		<view class="from">
			<view class="from-item">
				<view class="from-item-label">
					<text>姓名</text>
				</view>
				<view class="from-item-input">
					<input type="text" v-model="form.name" placeholder="请输入" placeholder-style="color:#D3CEC9;font-size:28rpx;">
				</view>
			</view>
			<view class="from-item">
				<view class="from-item-label">
					<text>手机号</text>
				</view>
				<view class="from-item-input">
					<input type="number" v-model="form.phone" placeholder="请输入" placeholder-style="color:#D3CEC9;font-size:28rpx;">
				</view>
			</view>
		</view>
		
		<view class="m-bottom">
			<view class="m-bottom-btn" @click="to_back()">
				<text>取消</text>
			</view>
			<view class="m-bottom-btn m-bottom-btn__extend" @click="submitFun">
				<text>确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					id:0,
					name:'',
					phone:''
				}
			}
		},
		onLoad(opt) {
			if(opt.id){
				uni.setNavigationBarTitle({
					title:'编辑联系人'
				})
				this.form.id = opt.id
				this.getDetailFun(opt.id)
			}else{
				uni.setNavigationBarTitle({
					title:'新增联系人'
				})
			}
		},
		methods: {
			getDetailFun(id){
				this.$http.getJson('userAddress_detail',{id}).then(res=>{
					if(res.code == 1){
						this.form.name = res.data.name
						this.form.phone = res.data.phone
					}
				})
			},
			submitFun(){
				let tip = {
					name : '请输入姓名',
					phone:'请输入手机号'
				}
				for(let i in tip){
					if(!this.form[i]){
						this.$m.msg(tip[i])
						return false;
					}
				}
				if(!this.$u.test.mobile(this.form.phone)){
					this.$m.msg('请输入正确手机号')
					return false;
				}
				this.$http.getJson('userAddress_add',{...this.form,type:1}).then(res=>{
					if(res.code == 1){
						this.$m.msg('提交成功',()=>{
							this.to_back()
						})
					}else{
						this.$m.msg(res.message)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
page{
	background: #f6f6f6;
}
.from{
	background: #fff;
	padding: 0 25rpx;
	.from-item{
		display: flex;
		align-items: center;
		height: 104rpx;
		border-bottom: 1px solid #E6E2DE;
		.from-item-label{
			font-size: 28rpx;
			color: #76706B;
			width: 170rpx;
		}
		.from-item-input{
			flex: 1;
			input{
				width: 100%;
			}
		}
	}
}

.m-bottom{
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom: 150rpx;
	width: 750rpx;
	.m-bottom-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 341rpx;
		height: 104rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 1rpx solid #E6E2DE;
		font-size: 32rpx;
		color: #9B958F;
	}
	.m-bottom-btn__extend{
		background: #D3A358;
		border-color: #D3A358;
		color: #fff;
		margin-left: 20rpx;
	}
}
</style>
